<template>
  <div class="page-select-service">
    <div class="title">添加商品</div>
    <ul class="category-list">
      <li class="category" :class="{active: data.categoryId === categoryId}" @click="changeCategory(data)"
          v-for="(data,index) in categoryList" :key="index">{{data.categoryName}}
      </li>
    </ul>
    <picker mode="selector" :range="numberList" @change="changeNumber" :value="number">
      <div class="picker" :class="number ? '':'disabled'">
        {{number ? number :
        "请选择商品数量"}}
        <img class="icon" src="/static/images/common/right.png">
      </div>
    </picker>
    <picker mode="selector" :range="dataList" range-key="goodsName" @change="changeService" :value="goodsId">
      <div class="picker" :class="goods.goodsName ? '':'disabled'">
        {{goods.goodsName ? goods.goodsName :
        "请选择商品"}}
        <img class="icon" src="/static/images/common/right.png">
      </div>
    </picker>
    <div class="btn-submit" @click="toSelect">确定添加</div>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        categoryList: [],
        dataList: [],
        categoryId: "",
        goods: {
          goodsName: ""
        },
        number: "",
        numberList: []
      };
    },
    components: {},
    methods: {
      changeNumber(e) {
        this.number = this.numberList[e.mp.detail.value];
      },
      async changeCategory(data) {
        this.categoryId = data.categoryId;
        wx.showLoading();
        const result = await wx.request({
          url: "/bg/goods/listPage",
          data: {
            page: 1,
            pageSize: 30,
            status: 1,
            type: 1,
            categoryId: data.categoryId
          }
        });
        wx.hideLoading();
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            if (data.type === 1) {
              list.push(_.pick(data, [ "goodsId", "goodsName", "integral" ]));
            }
          });
          this.dataList = list;
        } else {
          wx.showToast(result.message);
        }
      },
      changeService(e) {
        this.goods = this.dataList[ e.mp.detail.value ];
      },
      toSelect() {
        if (!this.goods.goodsId) {
          wx.showToast("请选择要添加的商品");
          return false;
        }
        if (!this.number) {
          wx.showToast("请选择要添加的数量");
          return false;
        }
        let totalIntegral = App.selectService.integral + (App.userIntegral || 0);
        App.giftList.forEach(gift => {
          totalIntegral -= gift.giftNum * gift.integral;
        });
        if(totalIntegral < this.number*this.goods.integral){
          wx.showToast("该用户积分不足");
          return false;
        }
        console.info(totalIntegral)
        App.giftList.push({
          giftId: this.goods.goodsId,
          goodsId: this.goods.goodsId,
          giftNum: this.number,
        })
        this.goods = {
          goodsName: '',
        };
        this.number = '';
        wx.navigateBack();
      },
      async loadCategory() {
        wx.showLoading();
        const result = await wx.request({
          url: "/bg/goodsCategory/listPage",
          data: {
            page: 1,
            pageSize: 30
          }
        });
        wx.hideLoading();
        if (result.code === 200) {
          const list = [];
          result.data.rows.forEach(data => {
            if (data.type === 1) {
              list.push(_.pick(data, [ "categoryId", "categoryName" ]));
            }
          });
          this.categoryList = list;
          this.changeCategory(list[ 0 ]);
        } else {
          wx.showToast(result.message);
        }
      }
    },
    async mounted() {
      const list = [];
      for (let i = 0; i < 20; i++) {
        list.push(i + 1);
      }
      this.numberList = list;
      this.loadCategory();
    }
  };
</script>

<style lang="scss">
  @import "../../styles/base";

  .page-select-service {
    .title {
      padding: pxToRem(40) pxToRem(30) pxToRem(10);
      font-size: pxToRem(32);
      color: #707070;
    }
    .category-list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: pxToRem(40) pxToRem(50) pxToRem(10);
      box-sizing: border-box;
      .category {
        margin-bottom: pxToRem(40);
        width: pxToRem(180);
        height: pxToRem(62);
        line-height: pxToRem(62);
        border: pxToRem(1) solid #9B9B9B;
        font-size: pxToRem(28);
        color: #9B9B9B;
        border-radius: pxToRem(31);
        text-align: center;
        box-sizing: border-box;
        &:nth-child(3n-1) {
          margin-left: pxToRem(50);
          margin-right: pxToRem(50);
        }
        &.active {
          color: #44BDF5;
          border: pxToRem(1) solid #44BDF5;
        }
      }
    }
    .picker {
      position: relative;
      margin-top: pxToRem(30);
      margin-left: pxToRem(50);
      padding-left: pxToRem(40);
      padding-right: pxToRem(40);
      width: pxToRem(650);
      height: pxToRem(68);
      line-height: pxToRem(68);
      font-size: pxToRem(28);
      box-sizing: border-box;
      border: pxToRem(1) solid #CCCCCC;
      border-radius: pxToRem(10);
      &.disabled {
        color: #9B9B9B;
      }
      .icon {
        @include middle-center-y();
        right: pxToRem(30);
        width: pxToRem(14);
        height: pxToRem(26);
        transform: rotate(90deg) translateX(-100%);
      }
    }
    .btn-submit {
      margin: pxToRem(310) auto 0;
      width: pxToRem(444);
      height: pxToRem(88);
      line-height: pxToRem(88);
      text-align: center;
      font-size: pxToRem(40);
      color: #fff;
      background: linear-gradient(90deg, rgba(117, 228, 252, 1) 0%, rgba(68, 189, 245, 1) 100%);
      border-radius: pxToRem(8);
    }
  }
</style>
